<template>
  <div class="bg-#053e45e6 w-full h-full">
    <!-- 画布元素 -->
    <div class="login-container">
      <el-form ref="loginForm" :model="form" :rules="rules" class="flex flex-col items-center mt-144px text-#fff"
        :hide-required-asterisk="true">
        <el-form-item prop="username" label="账号" label-position="top">
          <el-input v-model="form.username" type="text" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item prop="password" label="密码" label-position="top">
          <el-input v-model="form.password" type="password" placeholder="请输入密码" show-password />
        </el-form-item>
        <el-button class="login-btn" :loading="loading" @click="handleLogin(form)">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
// import { getAssets } from "@/utils";
import * as DashApi from "@/service/api/dashboard";
import { FormInstance } from "element-plus";
import { useLogin, jurisdiction } from "@/store";

const message = useMessage();

const rules = reactive({
  username: [
    { required: true, message: "警号不能为空", trigger: "blur" },
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
  ],
});
const form = reactive({
  tenantId: "00000",
  username: "管理员",
  password: "123456",
  clientId: "",
  grantType: "",
  jh: "032601",
});

const loading = ref(false);
const loginForm = ref<FormInstance>();
interface LoginType {
  access_token: string;
  client_id: string;
  token: string;
}
const login = useLogin();
const jur = jurisdiction();
const router = useRouter();
const clientId = import.meta.env.VITE_APP_CLIENT_ID;

const activeMenuArray = [
  "a1",
  "a2",
  "b1",
  "b2",
  "b3",
  "b4",
  "c1",
  "c2",
  "d1",
  "e1",
  "e2",
  "e3",
  "f1",
  "f2",
  "g1",
  "g2",
  "g3",
  "g4",
  "h1",
  "h2",
  "h3",
  "h4",
  "h5",
  "h6",
  "death",
  "hir",
  "amg",
];

const handleLogin = async (data) => {
  // 先进行表单验证
  loginForm.value?.validate(async (valid) => {
    if (!valid) {
      message.alertError("请填写正确的警号信息");
      return;
    }
    const params = {
      ...data,
      clientId: data.clientId || clientId,
      grantType: data.grantType || "password",
    };
    try {
      loading.value = true;

      const res = (await DashApi.PostLoginNew(params)) as LoginType;

      if (!res) {
        message.alertError("无法查询到该警员信息");
        return;
      }
      login.setState(res);
      if (res.access_token || res.client_id) {
        const resInfo: any = await DashApi.GetInfo();
        if (resInfo) {
          jur.setSex(resInfo.user);
          let filteredActiveMenuArray = activeMenuArray;
          if (jur.userName === "管理员") {
            filteredActiveMenuArray = activeMenuArray;
          }
          if (jur.userName === "科技所") {
            const list = ["amg"];
            filteredActiveMenuArray = activeMenuArray.filter((item) => !list.includes(item));
          }
          if (jur.userName === "秩序大队") {
            const list = ["amg", "death"];
            filteredActiveMenuArray = activeMenuArray.filter((item) => !list.includes(item));
          }
          if (jur.userName === "执勤民警") {
            const list = [
              "amg",
              "hir",
              "death",
              "h1",
              "h2",
              "h3",
              "h4",
              "h5",
              "h6",
            ];
            filteredActiveMenuArray = activeMenuArray.filter((item) => !list.includes(item));
          }
          jur.setState(filteredActiveMenuArray);
          // 计算3小时后过期时间戳
          const expires = Date.now() + 3 * 60 * 60 * 1000;
          // 存储到localStorage（使用过滤后的activeMenuArray）
          localStorage.setItem(
            "userInfo",
            JSON.stringify({
              ...res,
              user: resInfo.user,
              activeMenuArray: filteredActiveMenuArray,
              expires,
            })
          );
        }
        router.push({ path: "/index" });
      }
    } catch (err) {
      console.log("err", err);
      message.alertError("警号验证失败，请联系管理员")
      console.error("登录错误:", err);
    } finally {
      loading.value = false;
    }
  });
};
</script>

<style lang="less" scoped>
.login-container {
  background: url("@/assets/img/login/bg.png") no-repeat;
  background-size: 100% 100%;
  position: fixed; // 改为fixed定位
  top: 50%;
  left: 50%; // 将right改为left
  transform: translate(-50%, -50%); // 关键偏移
  width: 1000px;
  height: 610px;
  padding: 10px 20px;
  border-radius: 5px;
  z-index: 2;
  color: white;
  text-align: center;

  :deep(.el-form) {
    .el-form-item__label {
      width: 500px;
      color: #fff;
      font-size: 16px;
      padding: 10px 20px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      background-color: #026666;
      margin: 0;
    }

    .el-form-item__content {
      margin-bottom: 20px;

      .el-input__wrapper {
        width: 500px;
        height: 40px;
        border-radius: 0;
        background: url("@/assets/img/login/bg-2.png") no-repeat;
        background-size: 100% 100%;
        border: none;
        box-shadow: none;
        box-sizing: border-box;
        height: 65px;

        .el-input__inner {
          color: #fff;
          font-size: 18px;
        }

        .el-input__password {
          color: #fff;
        }
      }

      .el-form-item__error {
        font-size: 20px;
      }
    }

  }


  .login-btn {
    background: url("@/assets/img/login/bg-1.png") no-repeat;
    background-size: 100% 100%;
    width: 291px;
    height: 42px;
    font-size: 20px;
    margin-top: 41px;
    color: white;
    border: none;
    cursor: pointer;
  }
}


// ::v-deep .el-input__wrapper {
//   background: transparent;
//   font-size: 20px;
//   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
//   padding: 0 10px;
//   width: 100%;
//   box-shadow: none;
//   border: none;

//   &:focus {
//     outline: none; // 移除默认轮廓
//     border-bottom-color: #007bff; // 激活颜色
//     box-shadow: none; // 移除可能存在的阴影
//   }

//   .el-input__inner {
//     color: white;
//   }
// }</style>
